
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <title>浏览页面</title>
        <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
        <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
        <style type="text/css">
            <!--.layui-table-cell {
                height: auto!important;
            } -->
        </style>
    </head>
    <body class="pear-container">
    
        <!-- 顶部查询表单 -->
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form top-search-from">
                    
                    <div class="layui-form-item compact">
                        
                        <div class="layui-input-block">
                            <input type="hidden" name="text[]" value="like" placeholder="语言文本" class="layui-input">
                            <input type="text" name="text[]" value="" placeholder="请输入原文本" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <div name="status" id="status" value="" ></div>
                        </div>
                    </div>


                    <div class="layui-form-item layui-inline">
                        <!--<label class="layui-form-label"></label>-->
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="table-query">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md" lay-submit lay-filter="table-reset">
                            <i class="layui-icon layui-icon-refresh"></i>重置
                        </button>
                    </div>
                    <div class="toggle-btn">
                        <a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
                        <a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 数据表格 -->
        <div class="layui-card">
            <blockquote class="layui-elem-quote">
                <div>1.在代码使用ttt('你好，世界'),即可实现调用语言包，当本语言包不存在时，会自动添加原文，后续手动补齐译文即可</div>
                <div>2.补充译文时，可用点击一键填写，会自动复制当前页面中的所有内容，再手动前往翻译软件中，转为对应的译文，再将译文填入弹窗中，即可完成译文的填充</div>
                <div>3.点击保存翻译后，会自动生成对应的语言包配置</div>
            </blockquote>
            <div class="layui-card-body">
                <table id="data-table" lay-filter="data-table"></table>
            </div>
        </div>

        <!-- 表格顶部工具栏 -->
        <script type="text/html" id="table-toolbar">
            <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" permission="admin.app.utillangdetail.insert">
                <i class="layui-icon layui-icon-add-1"></i>新增
            </button>
            <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="autoEdit" permission="admin.app.utillangdetail.insert">
                一键填写
            </button>
            <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="saveData" permission="admin.app.utillangdetail.insert">
                保存翻译
            </button>
        </script>

        <!-- 表格行工具栏 -->
        <script type="text/html" id="table-bar">
            <button class="pear-btn pear-btn-xs tool-btn" lay-event="remove" permission="admin.app.utillangdetail.delete">删除</button>
        </script>

        <div type="text/html" id="autoEdit" style="display: none">
                    <textarea class="layui-textarea " style="height: 500px" name="" id="yiwenInput" placeholder="请将翻译好的译文粘贴在此处，一行一条"></textarea>
        </div>

        <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
        <script src="/app/admin/component/pear/pear.js"></script>
        <script src="/app/admin/admin/js/permission.js"></script>
        <script src="/app/admin/admin/js/common.js"></script>
        <script src="/app/admin/admin/js/layuiAdmin.js"></script>
        
        <script>

            // 相关常量
            const PRIMARY_KEY = "id";
            const SELECT_API = "/admin/utils/util-lang-detail/select?lang_id={$lang_id}";
            const UPDATE_API = "/admin/utils/util-lang-detail/update";
            const DELETE_API = "/admin/utils/util-lang-detail/delete";
            const INSERT_URL = "/admin/utils/util-lang-detail/insert";


            // 字段  type
            layui.use(["jquery", "xmSelect", "popup"], function() {
                let value = layui.$("#status").attr("value");
                let initValue = value ? value.split(",") : [];
                var data = [{name:'仅看无译文',value:1}];
                layui.xmSelect.render({
                    el: "#status",
                    name: "status",
                    initValue: initValue,
                    filterable: true,
                    tips: "请选择状态",
                    data: data,
                    placeholder: "请选择状态",
                    model: {"icon":"hidden","label":{"type":"text"}},
                    clickClose: true,
                    radio: true,
                });
            });


            
            // 表格渲染
            layui.use(["table", "form", "common", "popup", "util","soulTable","laytpl"], function() {
                let table = layui.table;
                let laytpl = layui.laytpl;
                let form = layui.form;
                let $ = layui.$;
                let common = layui.common;
                let util = layui.util;
                
				// 表头参数
				let cols = [
					{
					// 	type: "checkbox",
					// 	align: "center"
					// },{
					// 	title: "ID",align: "center",
					// 	field: "id",width: 100,
					// 	sort: true,
					// },{
						title: "内容",align: "left",
						field: "text",templet:d=>{
                            return `<div class="text-input">${d.text}</div>`
                        }
					},{
						title: "翻译内容",align: "center",
						field: "text2",templet:d=>{
                            return `<input class="layui-input inputData" name="text" data-tid="${d.id}" data-lang_id="${d.lang_id}" value="${d.text2}">`;
                        }
					},{
						title: "操作",
						toolbar: "#table-bar",
						align: "center",
						fixed: "right",
						width: 120,
					}
				];
				
				// 获取表格自定义表头和列宽
				cols = layuiTableFilter(SELECT_API,cols)
				// 渲染表格
				function render()
				{
				    layuiRender({
				        url: SELECT_API,
				        cols:[cols],
                        limit:30,
				        // 表格拖拽回调  weight 是默认的排序字段 按需调整
				        // where:{field:'weight',order:'desc'},
				        // rowDrag:{done:(obj)=>{func.rowDragDoneFunc(obj,'weight')}},

				    });
				}
				render();
				
				
                // 编辑或删除行事件
                table.on("tool(data-table)", function(obj) {
                    if (obj.event === "remove") {
                        func.remove(obj);
                    } else if (obj.event === "edit") {
                        func.edit(obj);
                    }
                });

                // 表格顶部工具栏事件
                table.on("toolbar(data-table)", function(obj) {
                    if (obj.event === "add") {
                        func.add();
                    } else if (obj.event === "refresh") {
                        refreshTable();
                    } else if (obj.event === "batchRemove") {
                        func.batchRemove(obj);
                    }else if(obj.event == 'saveData'){
                        saveData();
                    }else if(obj.event == 'autoEdit'){
                        autoEdit()
                    }
                });

                function autoEdit(){
                    var text = '';
                    $('.text-input').each(function(k,v){
                        text += $(v).html()+"\r\n";
                    })
                    if(copy_text(text)){
                            layer.open({
                                type: 1,
                                area:['80%','80%'],
                                content: $('#autoEdit'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                                btn:['确定填入'],
                                shadeClose:true,
                                yes:function(index, layero){
                                   var text = $("#yiwenInput").val();
                                   var arr = text.split('\n');
                                   for(let i in arr){
                                       $('.inputData').eq(i).val(arr[i])
                                   }
                                   layer.close(index);
                                   layer.msg('译文已填入，请点击保存',{icon:1});
                                }
                            });
                            layer.msg('原文已复制成功,快去翻译吧',{icon:1});
                    }
                }

                function saveData(){
                    var addData = [];
                    $('.inputData').each(function(k,v){
                        addData.push({
                            text:$(v).val(),
                            tid:$(v).data('tid'),
                            lang_id:$(v).data('lang_id'),
                        });
                    })
                    $.post('saveData',{addData:addData},function(res){
                        if(res.code==0){
                            layer.msg(res.msg,{icon:1})
                            table.reload('data-table', { })
                        }else{
                            layer.msg(res.msg,{icon:5})
                        }
                    })
                }

                // 表格顶部搜索事件
                layuiFormQuery('table-query');

                // 表格顶部搜索重置事件
                layuiFormReset('table-reset');

                // 表格排序事件
                layuiTableSort();

                // 新增 编辑 删除的方法集合
                 let func = lauiInit(PRIMARY_KEY,INSERT_URL,UPDATE_API,DELETE_API);

                //复制指定内容
                function copy_text(str){
                    var html = document.createElement('div');
                    html.innerText = str;
                    html.id = 'copy-text';
                    document.body.appendChild(html);
                    //复制指定标签内容
                    var my_copy = (element) => {
                        /*对标签id中文本进行全选*/
                        var text = document.getElementById(element);
                        if (document.body.createTextRange) {
                            var range = document.body.createTextRange();
                            range.moveToElementText(text);
                            range.select();
                        } else if (window.getSelection) {
                            var selection = window.getSelection();
                            var range = document.createRange();
                            range.selectNodeContents(text);
                            selection.removeAllRanges();
                            selection.addRange(range);
                        } else {
                            alert("none");
                            return false;
                        }
                        // 复制选中的内容
                        if (document.execCommand('copy', false, null)) {
                            return 1;
                        } else {
                            return 0;
                        }
                    }
                    var res = my_copy(html.id);
                    html.remove();
                    return res;
                }

            })

        </script>
    </body>
</html>
